<template>
    <div class="zgn-tabArray-wrapper">
        <div class="zgn-tabArray-title">
            <header class="zgn-tabArray-nav" v-for="title in titles" :key="title">
                <div :class="{selectedTabs:selected===title}" @click="selectTitle(title)">{{title}}</div>
            </header>
        </div>
        <main v-for="(contents,index) in val" :key="index" >
            <div class="zgn-tabArray-content" v-if="contents.title===selected">{{contents.content}}</div>
        </main>
    </div>
</template>

<script lang="ts">
import {ref} from 'vue'
export default {
    props:['val'],
    setup(props,ctx){
        const titles = ref([]) 
        const selected = ref(props.val[0].title)
        const selectTitle = ref((title:string) => {selected.value=title})
        for(let i = 0 ; i<props.val.length ; i++){
            if(titles.value.indexOf(props.val[i].title)===-1){
                titles.value.push(props.val[i].title)
            } 
        }
        return{titles,selected,selectTitle}
    }    
}
</script>

<style lang="scss" >
.zgn-tabArray-wrapper{
    padding:10px;
    >.zgn-tabArray-title{
        display:flex;
        position: relative;
        border-bottom: 1px solid rgb(180, 173, 173);
        >.zgn-tabArray-nav{
            font-weight:700;
            margin-right:20px ;
        }
    }
}
.zgn-tabArray-content{
    padding: 10px;
}
.selectedTabs{
    color: rgb(66, 66, 221);
    padding-bottom: 10px;
    border-bottom: 3px solid rgb(66, 66, 221);
}

</style>